<template>
  <div style="height:100%">
    <!--页名-->
    <el-row style="height:10%" type="flex" justify="start" align="middle">
      <label
        style="font-size: 32px;font-family: Arial;float:left;margin-left:10px"
      >Area/Line Overview</label>
    </el-row>
    <!--下拉框区域-->
    <el-row style="height:10%" type="flex" justify="start" align="middle" :gutter="10">
      <!-- 返回BUTTUON -->
      <el-col :span="1">
        <el-button circle icon="el-icon-arrow-left" @click="backToLastPage()"></el-button>
      </el-col>
      <!--第一个下拉框-->
      <el-col :span="3">
        <el-select
          v-model="defaultvalue_Department"
          :placeholder="placeholder"
          style="width:90%"
          @change="secondSelect"
        >
          <el-option
            v-for="item in dept_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <!--第二个下拉框-->
      <el-col :span="3">
        <el-select v-model="defaultvalue_AreaLine" :placeholder="placeholder" style="width:90%">
          <el-option
            v-for="item in default_area_line_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <!-- 搜索BUTTON -->
      <el-col :span="1">
        <el-button circle icon="el-icon-search" @click="shouTableInf()"></el-button>
      </el-col>
    </el-row>
    <!-- 表格区域 -->
    <el-row :gutter="30" style="height:80%" type="flex" justify="center" align="top">
      <el-col :span="13" :gutter="100" style="height:100%;">
        <el-row class="ttable" style="height:49%">
          <BatchList></BatchList>
        </el-row>
        <el-row style="height:2%"></el-row>
        <el-row class="ttable" style="height:49%">
          <ParameterList></ParameterList>
        </el-row>
      </el-col>
      <el-col :span="11" class="ttable" style="height:100%;">
        <WarningInf></WarningInf>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BatchList from "@/pages/contents/tracking/BatchParameterPages/subComponents/BatchList";
import ParameterList from "@/pages/contents/tracking/BatchParameterPages/subComponents/ParameterList";
import WarningInf from "@/pages/contents/tracking/BatchParameterPages/subComponents/WarningInf";
export default {
  components: {
    BatchList,
    ParameterList,
    WarningInf
  },
  data() {
    return {
      defaultvalue_Department: "",
      defaultvalue_AreaLine: "",
      placeholder: "请选择",

      dept_options: [
        {
          value: "brew_dept",
          label: "酿造"
        },
        {
          value: "packing_dept",
          label: "包装"
        }
      ],

      // 默认第二个显示为空
      default_area_line_options: [{}],

      area_line_options: [
        [
          {
            value: "糖化",
            label: "糖化"
          },
          {
            value: "发酵",
            label: "发酵"
          },
          {
            value: "清酒",
            label: "清酒"
          }
        ],

        [
          {
            value: "BL01",
            label: "BL01"
          },
          {
            value: "BL02",
            label: "BL02"
          },
          {
            value: "BL02",
            label: "BL02"
          },
          {
            value: "BL03",
            label: "BL03"
          },
          {
            value: "BL04",
            label: "BL04"
          },
          {
            value: "BL05",
            label: "BL05"
          },
          {
            value: "CL01",
            label: "CL02"
          },
          {
            value: "CL02",
            label: "CL02"
          }
        ]
      ]
    };
  },

  methods: {
    backToLastPage() {
      this.$router.push("/batch_parameter");
    },
    secondSelect(value) {
      // this.defaultvalue_AreaLine = this.placeholder;
      for (var i = 0; i < this.dept_options.length; i++) {
        if (value == this.dept_options[i].value) {
          this.default_area_line_options = this.area_line_options[i];
          break;
        }
      }
    }
  }
};
</script>
<style scoped>
.hheader {
  text-align: left;
}
.ttable {
  background: white;
  border-radius: 5px;
}
</style>
